{% extends "base.html" %}
{% load staticfiles %}
{% block title %}
Zabbix主机
{% endblock %}
{% block content %}
    <div class="container">
        <h2>
            Zabbix主机列表
        </h2>
        {% if error %}<div class="alert alert-danger"><a href="#" class="close" data-dismiss="alert">&times;</a>{{ error }}</div>{% endif %}
        {% if success %}<div class="alert alert-success"><a href="#" class="close" data-dismiss="alert">&times;</a>{{ success }}</div>{% endif %}
        <div class="row">
            <div class="col-xs-2 col-md-2 col-lg-2">
                <label for="name" class="sr-only"></label>
                <input class="form-control" type="text" id="name" placeholder="输入主机名称">
            </div>
            <div class="col-xs-2 col-md-2 col-lg-2">
                <label  for="ip" class="sr-only"></label>
                <input class="form-control" type="text" id="ip" placeholder="输入主机IP地址">
            </div>
            <div class="col-xs-3 col-md-3 col-lg-3">
                <label for="group" class="sr-only"></label>
                <select class="form-control" id="group">
                    <option value="">选择分组</option>
                    {% for group in group_list %}
                    <option value="{{ group.groupid }}">{{ group.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-xs-3 col-md-3 col-lg-3">
                <label for="template" class="sr-only"></label>
                <select class="form-control" id="template">
                    <option value="">选择模板</option>
                    {% for template in template_list %}
                    <option value="{{ template.templateid }}">{{ template.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-xs-2 col-md-2 col-lg-2">
                <button class="btn btn-default pull-right" type="button" id="create">添加主机</button>
            </div>
        </div>
    <br>


    <div class="panel-body">
        <div class="dataTable_wrapper">
            <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                <thead>
                <tr>
                    <th>Host</th>
                    <th>Interfaces</th>
                    <th>Groups</th>
                    <th>Templates</th>
                    <th>Items</th>
                    <th>Triggers</th>
                    <th>Graphs</th>
                    <th>Screens</th>
                    <th>Status</th>
                </tr>
            </thead>
                <tbody>
                {% for host in host_list %}
                    <tr>
                        <td>{{ host.host }}</td>
                        <td>{% for h in host.interfaces  %}
                            {{ h.ip }}<br>
                            {% endfor %}</td>
                        <td>{% for h in host.groups  %}
                            {{ h.name }}<br>
                            {% endfor %}</td>
                        <td><a href="{% url 'zabbix:template' %}?hostid={{ host.hostid }}">Templates&nbsp;<span class="badge">{{ host.parentTemplates|length }}</span></td>
                        <td><a href="{% url 'zabbix:item' %}?hostid={{ host.hostid }}">Items&nbsp;<span class="badge">{{ host.items|length }}</span></a></td>
                        <td><a href="{% url 'zabbix:item' %}?hostid={{ host.hostid }}">Triggers&nbsp;<span class="badge">{{ host.triggers|length }}</span></a></td>
                        <td><a href="{% url 'zabbix:graph' %}?hostid={{ host.hostid }}">Graphs&nbsp;<span class="badge">{{ host.graphs|length }}</span></a></td>
                        <td><a href="{% url 'zabbix:item' %}?hostid={{ host.hostid }}">Screens&nbsp;<span class="badge">{{ host.screens|length }}</span></a></td>
                        <td>{% if host.status == '0' %}<label class="label label-success">Enable</label>
                            {% else %}<label class="label label-danger">Disable</label>{% endif %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    </div>
{% endblock %}
{% block scripts %}
    <script>
        $('#create').click(function(){
            var name=$('#name').val();
            var ip=$('#ip').val();
            var groupid=$('#group').val();
            var templateid=$('#template').val();
            $.getJSON("{% url 'zabbix:host_create' %}",{name:name,ip:ip,groupid:groupid,templateid:templateid},function(result){
                alert(result);
            });
        });
    </script>
{% endblock %}